<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .mGlass {
            display: flex;
            position: relative;
            margin-left: 200px;
        }

        .middle {
            width: 400px;
            height: 400px;
            background-color: antiquewhite;
        }
        .middle:hover{
            cursor: move;
        }
        .middle .layer{
            display: none;
            width: 200px;
            height: 200px;
            background-color: black;
            opacity: 55%;
            position: absolute;
            top: -20px;
            left: 0;
        }
        .small li {
            height: 64px;
            margin-left: 25px;
            margin-bottom: 15px;
            border: 2px solid white;
        }
        .small li:last-child{
            margin-bottom: 0;
        }
        .big{
            width: 400px;
            height: 400px;
            background-color: aqua;
            position: absolute;
            top: 0;
            left: 410px;
            display: none;
            background-image: url(./images/1.jpg);
            background-repeat: no-repeat;
            background-origin: border-box;
            background-position: -200px -200px;
        }
        .small .active{
            border-color: #4fc89a;
            
        }
    </style>
</head>

<body>
    <div style="height: 50px; width: 200px;"></div>
    <div class="mGlass">
        <div class="middle">
            <div class="layer"></div>
            <img src="./images/1.jpg" alt="" width="400px">
        </div>
        <div class="small">
            <ul>
                <li class="active"><img src="./images/1.jpg" alt="" width="64px"></li>
                <li><img src="./images/2.jpg" alt="" width="64px"></li>
                <li><img src="./images/3.jpg" alt="" width="64px"></li>
                <li><img src="./images/4.jpg" alt="" width="64px"></li>
                <li><img src="./images/5.jpg" alt="" width="64px"></li>
            </ul>
        </div>
        <div class="big"></div>
    </div>
    <div style="height: 500px; width: 200px;"></div>
    <script>
        const big=document.querySelector('.big')
        // 小盒子
        const small =document.querySelector('.small ul')
        // 中等盒子
        const middle = document.querySelector('.middle')
        // 鼠标经过小盒子切换图片效果，采用时间委托
        small.addEventListener('mouseover',function(e){
            if(e.target.tagName==='IMG'){
                // 移除小盒子的active
                const active = document.querySelector('.small .active')
                active.classList.remove('active')
                // 鼠标经过图片的li添加active
                e.target.parentNode.classList.add('active')
                // 中等盒子图片改变
                middle.querySelector('img').src=e.target.src
                big.style.backgroundImage=`url(${e.target.src})`
            }
        })
        // 鼠标经过中等盒子，大盒子显隐效果
        middle.addEventListener('mouseenter',show)
        middle.addEventListener('mouseleave',hide)
        big.addEventListener('mouseenter',show)
        big.addEventListener('mouseleave',hide)
        let timerId=0
        function show(){
            clearTimeout(timerId)
            big.style.display='block'
        }
        function hide(){
            timerId=setTimeout(function(){
                big.style.display='none'
            },200)
        }

        // 鼠标经过中等盒子，黑色遮罩显隐效果
        const layer=document.querySelector('.layer')
        middle.addEventListener('mouseenter',function(){
            layer.style.display='block'
        })
        middle.addEventListener('mouseleave',function(){
            layer.style.display='none'
        })
        // 移动黑色盒子
        middle.addEventListener('mousemove',function(e){
            let x=e.pageX-middle.getBoundingClientRect().x
            let y=e.pageY-middle.getBoundingClientRect().y-document.documentElement.scrollTop
            // 不超过中等盒子时移动黑色盒子
            if(x>0&&x<400&&y>0&&y<400){
                if(x<100) x=0
                if(x>=100&&x<=300) x-=100
                if(x>300) x=200
                if(y<100) y=0
                if(y>=100&&y<=300) y-=100
                if(y>300) y=200
                layer.style.top=`${y}px`
                layer.style.left=`${x}px`
                // 移动背景，显示放大效果
                big.style.backgroundPosition=`${-x*2}px ${-y*2}px`
                // console.log(x,y);
            }
            
            
        })
    </script>
</body>

</html>